<template>
    <div class="card">
        <!-- {{this.cardData}} -->
        <div class="block">
            <div v-if="this.cardData == ''" class="noEquipment"> 
                该项绑定设备未开启
            </div>
            <el-carousel trigger="click" class="card_hight" :autoplay="false" :initial-index="cardData.index" >
            <el-carousel-item v-for="item in cardData.unit" :key="item.index">
                <!-- 设备标题 -->
                <router-link to="/overview">
                    <h4 class="normal" @click="router('irf818',item)" :title="item.name">
                    <!-- <svg class="icon card_icon" aria-hidden="true">
                        <use xlink:href="#icon-xinfeng-copy"></use>
                    </svg> -->
                    <img class="title_icon" src="../../assets/title.png" alt />
                    {{item.typename}}:&nbsp;{{item.name}}
                 </h4>
                </router-link>
                <!-- 卡片内容 -->
                <div class="card_padding">
                    <div class="irfcard_top_style">
                        <div class="irfcard_top">
                            <div class="irfcard_top_title">
                                <span>设备状态：</span>
                            </div>
                            <div class="irfcard_top_icon">
                                <!-- 开机  0关机  1开机   2制热  3制冷-->
                                <img src="../../assets/close_.png" alt=""  v-if="item.unit[4].value == 0">
                                <img src="../../assets/start.png" alt=""  v-if="item.unit[4].value == 1">
                                <img src="../../assets/sun.png" alt=""  v-if="item.unit[4].value == 2">
                                <img src="../../assets/icon_snow.png" alt=""  v-if="item.unit[4].value == 3">
                            </div>
                            <div class="irfcard_top_name">
                                <span v-if="item.unit[4].value == 0">关机</span>
                                <span v-if="item.unit[4].value == 1">开机</span>
                                <span v-if="item.unit[4].value == 2">制热开机</span>
                                <span v-if="item.unit[4].value == 3">制冷开机 </span>
                            </div>
                        </div>
                        <div class="irfcard_bottmo">
                            <div class="irfcard_temp">
                                <svg :class="item.unit[5].value == 1 &&(item.unit[4].value != 0 || item.unit[0].value != 0 ) ? 'icon anjian_active':'icon anjian'" aria-hidden="true">
                                    <use xlink:href="#icon-00-wendushezhi-05"></use>
                                </svg>
                                <p>{{item.unit[0].name}}</p>
                            </div>
                            <div class="irfcard_temp">
                                <svg :class="item.unit[5].value == 2 &&(item.unit[4].value != 0 || item.unit[1].value != 0 )  ? 'icon anjian_active':'icon anjian'" aria-hidden="true">
                                    <use xlink:href="#icon-00-wendushezhi-05"></use>
                                </svg>
                                <p>{{item.unit[1].name}}</p>
                            </div>
                            <div class="irfcard_temp">
                                <svg :class="item.unit[5].value == 3 &&(item.unit[4].value != 0 || item.unit[2].value != 0 )  ? 'icon anjian_active':'icon anjian'" aria-hidden="true">
                                    <use xlink:href="#icon-00-wendushezhi-05"></use>
                                </svg>
                                <p>{{item.unit[2].name}}</p>
                            </div>
                            <div class="irfcard_temp">
                                <svg :class="item.unit[5].value == 4 &&(item.unit[4].value != 0 || item.unit[3].value != 0 )  ? 'icon anjian_active':'icon anjian'" aria-hidden="true">
                                    <use xlink:href="#icon-00-wendushezhi-05"></use>
                                </svg>
                                <p>{{item.unit[3].name}}</p>
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
                 
            </el-carousel-item>
            </el-carousel>
        </div>
        
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],
    data () {
        return{
        }
    },
    created() {
    },
    methods: {
        // 跳转
        router(val,item){
            var arr = {
                addr:item.addr,
                name:item.name,
                type:item.type,
                uid:item.uid
            }
            localStorage.setItem("当前设备编号", JSON.stringify(arr))
            localStorage.setItem("menuRouter", val)
        },
        numc(a,b,c){
            var s = ((a-b) /(c - b)) *100
            if(s > 100){
                s = 1
            }else if(s < 0){
                s = 0
            }
            return s
            },
    },
     // 清除定时器
    beforeDestroy() {
    },
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
.normal .card_icon{
    font-size: 20px;
}
/deep/ .card_padding {
    padding: 0px 20px 0px 30px !important;
    display: flex;
}

.irfcard_top_style{
    width: 100%;
    padding-right: 10px;
    padding-top: 10px;
}
.irfcard_top{
    width: 100%;
    display: flex;
    align-items: center;
    
}
.irfcard_top_title{
    width: 160px;
    text-align: right;
    padding-right: 40px;
}
.irfcard_top_icon{
    width: 110px;
}
.irfcard_top_name{
    font-size: 22px;
}
/* 图标样式 */
.irfcard_top_icon img{
    width: 65px;
}
.irfcard_bottmo{
    display: flex;
    align-items: center;
    margin-top: 15px;
    /* border-left: 4px solid #8fc6ff40;
    border-right: 4px solid #8fc6ff40; */
    border-bottom: 2px solid #8fc6ff69;
    /* border-image: linear-gradient(to bottom , #fff0, #8fc6ffa3)100 0; */
    background: linear-gradient(to bottom , rgba(255, 0, 0, 0), #8fc6ffa3 300%);
    padding: 30px 0px 15px 0px;
}
.irfcard_temp{
    width: 25%;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
}
.anjian{
    color: #00fcffa6;
  font-size: 40px;
  border-radius: 50%;
  /* box-shadow: 0px 0px 4px 0px #969dc3; */
  opacity: 0.7;
  filter: grayscale(100%);
    filter: gray;
}
.anjian_active{
  font-size: 40px;
  border-radius: 50%;
  color: #00fcff;
  /* box-shadow: 0px 0px 7px 0px #5af4ff; */
}
</style>